<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		html, body {
		  height: 100%;
		  padding: 0;
		  margin: 0;
		  background: #000;
		}
		canvas {
		  position: absolute;
		  width: 100%;
		  height: 100%;
		}

		/*setup*/
				*{
				  margin: 0;
				  padding: 0;
				}

				@font-face {
				  font-family: 'Monoton';
				  font-style: normal;
				  font-weight: 400;
				  src: local('Monoton'), local('Monoton-Regular'), url(http://themes.googleusercontent.com/static/fonts/monoton/v4/AKI-lyzyNHXByGHeOcds_w.woff) format('woff');
				}

				@font-face {
				  font-family: 'Iceland';
				  font-style: normal;
				  font-weight: 400;
				  src: local('Iceland'), local('Iceland-Regular'), url(http://themes.googleusercontent.com/static/fonts/iceland/v3/F6LYTZLHrG9BNYXRjU7RSw.woff) format('woff');
				}

				@font-face {
				  font-family: 'Pacifico';
				  font-style: normal;
				  font-weight: 400;
				  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(http://themes.googleusercontent.com/static/fonts/pacifico/v5/yunJt0R8tCvMyj_V4xSjafesZW2xOQ-xsNqO47m55DA.woff) format('woff');
				}

				@font-face {
				  font-family: 'PressStart';
				  font-style: normal;
				  font-weight: 400;
				  src: local('Press Start 2P'), local('PressStart2P-Regular'), url(http://themes.googleusercontent.com/static/fonts/pressstart2p/v2/8Lg6LX8-ntOHUQnvQ0E7o3dD2UuwsmbX3BOp4SL_VwM.woff) format('woff');
				}

				@font-face {
				  font-family: 'Audiowide';
				  font-style: normal;
				  font-weight: 400;
				  src: local('Audiowide'), local('Audiowide-Regular'), url(http://themes.googleusercontent.com/static/fonts/audiowide/v2/8XtYtNKEyyZh481XVWfVOj8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
				}

				@font-face {
				  font-family: 'Vampiro One';
				  font-style: normal;
				  font-weight: 400;
				  src: local('Vampiro One'), local('VampiroOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/vampiroone/v3/Ho2Xld8UbQyBA8XLxF1_NYbN6UDyHWBl620a-IRfuBk.woff) format('woff');
				}

				body{
				  background-color: #222222;
				}

				#container{
				  width:500px;
				  margin:auto;
				}


				/*neeeeoooon*/
				p{
				  text-align:center;
				  font-size:7em;
				  margin:20px 0 20px 0; 
				}

				a{
				  text-decoration:none; 
				  -webkit-transition: all 0.5s;
				  -moz-transition: all 0.5s;
				  transition: all 0.5s;
				}

				p:nth-child(1) a{
				  color:#FF1177;
				  font-family:Monoton;
				}
				p:nth-child(1) a:hover,p:nth-child(1) a.active{
				  -webkit-animation: neon1 1.5s ease-in-out infinite alternate;
				  -moz-animation: neon1 1.5s ease-in-out infinite alternate;
				  animation: neon1 1.5s ease-in-out infinite alternate; 
				}

				p:nth-child(2) a{
				  font-size:1.5em;
				  color:#228DFF;
				  font-family:Iceland;
				}
				p:nth-child(2) a:hover{
				  -webkit-animation: neon2 1.5s ease-in-out infinite alternate;
				  -moz-animation: neon2 1.5s ease-in-out infinite alternate;
				  animation: neon2 1.5s ease-in-out infinite alternate;
				}

				p:nth-child(3) a{
				  color:#FFDD1B;
				  font-family:Pacifico;
				}
				p:nth-child(3) a:hover{ 
				  -webkit-animation: neon3 1.5s ease-in-out infinite alternate;
				  -moz-animation: neon3 1.5s ease-in-out infinite alternate;
				  animation: neon3 1.5s ease-in-out infinite alternate; 
				}

				p:nth-child(4) a{
				  color:#B6FF00;
				  font-family:PressStart;
				  font-size:0.8em;
				}
				p:nth-child(4) a:hover{
				  -webkit-animation: neon4 1.5s ease-in-out infinite alternate;
				  -moz-animation: neon4 1.5s ease-in-out infinite alternate;
				  animation: neon4 1.5s ease-in-out infinite alternate;
				}

				p:nth-child(5) a{
				  color:#FF9900;
				  font-family:Audiowide;
				}
				p:nth-child(5) a:hover{
				  -webkit-animation: neon5 1.5s ease-in-out infinite alternate;
				  -moz-animation: neon5 1.5s ease-in-out infinite alternate;
				  animation: neon5 1.5s ease-in-out infinite alternate; 
				}

				p:nth-child(6) a{
				  color:#BA01FF;
				  font-family:Vampiro One;
				}
				p:nth-child(6) a:hover{
				  -webkit-animation: neon6 1.5s ease-in-out infinite alternate;
				  -moz-animation: neon6 1.5s ease-in-out infinite alternate;
				  animation: neon6 1.5s ease-in-out infinite alternate;
				}

				p a:hover{
				color:#ffffff;  
				}



				/*glow for webkit*/
				@-webkit-keyframes neon1 {
				  from {
				    text-shadow: 0 0 10px #fff,
				               0 0 20px  #fff,
				               0 0 30px  #fff,
				               0 0 40px  #FF1177,
				               0 0 70px  #FF1177,
				               0 0 80px  #FF1177,
				               0 0 100px #FF1177,
				               0 0 150px #FF1177;
				  }
				  to {
				    text-shadow: 0 0 5px #fff,
				               0 0 10px #fff,
				               0 0 15px #fff,
				               0 0 20px #FF1177,
				               0 0 35px #FF1177,
				               0 0 40px #FF1177,
				               0 0 50px #FF1177,
				               0 0 75px #FF1177;
				  }
				}

				@-webkit-keyframes neon2 {
				  from {
				    text-shadow: 0 0 10px #fff,
				               0 0 20px  #fff,
				               0 0 30px  #fff,
				               0 0 40px  #228DFF,
				               0 0 70px  #228DFF,
				               0 0 80px  #228DFF,
				               0 0 100px #228DFF,
				               0 0 150px #228DFF;
				  }
				  to {
				    text-shadow: 0 0 5px #fff,
				               0 0 10px #fff,
				               0 0 15px #fff,
				               0 0 20px #228DFF,
				               0 0 35px #228DFF,
				               0 0 40px #228DFF,
				               0 0 50px #228DFF,
				               0 0 75px #228DFF;
				  }
				}

				@-webkit-keyframes neon3 {
				  from {
				    text-shadow: 0 0 10px #fff,
				               0 0 20px  #fff,
				               0 0 30px  #fff,
				               0 0 40px  #FFDD1B,
				               0 0 70px  #FFDD1B,
				               0 0 80px  #FFDD1B,
				               0 0 100px #FFDD1B,
				               0 0 150px #FFDD1B;
				  }
				  to {
				    text-shadow: 0 0 5px #fff,
				               0 0 10px #fff,
				               0 0 15px #fff,
				               0 0 20px #FFDD1B,
				               0 0 35px #FFDD1B,
				               0 0 40px #FFDD1B,
				               0 0 50px #FFDD1B,
				               0 0 75px #FFDD1B;
				  }
				}

				@-webkit-keyframes neon4 {
				  from {
				    text-shadow: 0 0 10px #fff,
				               0 0 20px  #fff,
				               0 0 30px  #fff,
				               0 0 40px  #B6FF00,
				               0 0 70px  #B6FF00,
				               0 0 80px  #B6FF00,
				               0 0 100px #B6FF00,
				               0 0 150px #B6FF00;
				  }
				  to {
				    text-shadow: 0 0 5px #fff,
				               0 0 10px #fff,
				               0 0 15px #fff,
				               0 0 20px #B6FF00,
				               0 0 35px #B6FF00,
				               0 0 40px #B6FF00,
				               0 0 50px #B6FF00,
				               0 0 75px #B6FF00;
				  }
				}

				@-webkit-keyframes neon5 {
				  from {
				    text-shadow: 0 0 10px #fff,
				               0 0 20px  #fff,
				               0 0 30px  #fff,
				               0 0 40px  #FF9900,
				               0 0 70px  #FF9900,
				               0 0 80px  #FF9900,
				               0 0 100px #FF9900,
				               0 0 150px #FF9900;
				  }
				  to {
				    text-shadow: 0 0 5px #fff,
				               0 0 10px #fff,
				               0 0 15px #fff,
				               0 0 20px #FF9900,
				               0 0 35px #FF9900,
				               0 0 40px #FF9900,
				               0 0 50px #FF9900,
				               0 0 75px #FF9900;
				  }
				}

				@-webkit-keyframes neon6 {
				  from {
				    text-shadow: 0 0 10px #fff,
				               0 0 20px #fff,
				               0 0 30px #fff,
				               0 0 40px #ff00de,
				               0 0 70px #ff00de,
				               0 0 80px #ff00de,
				               0 0 100px #ff00de,
				               0 0 150px #ff00de;
				  }
				  to {
				    text-shadow: 0 0 5px #fff,
				               0 0 10px #fff,
				               0 0 15px #fff,
				               0 0 20px #ff00de,
				               0 0 35px #ff00de,
				               0 0 40px #ff00de,
				               0 0 50px #ff00de,
				               0 0 75px #ff00de;
				  }
				}

				/*glow for mozilla*/
				@-moz-keyframes neon1 {
				  from {
				    text-shadow: 0 0 10px #fff,
				               0 0 20px  #fff,
				               0 0 30px  #fff,
				               0 0 40px  #FF1177,
				               0 0 70px  #FF1177,
				               0 0 80px  #FF1177,
				               0 0 100px #FF1177,
				               0 0 150px #FF1177;
				  }
				  to {
				    text-shadow: 0 0 5px #fff,
				               0 0 10px #fff,
				               0 0 15px #fff,
				               0 0 20px #FF1177,
				               0 0 35px #FF1177,
				               0 0 40px #FF1177,
				               0 0 50px #FF1177,
				               0 0 75px #FF1177;
				  }
				}

				@-moz-keyframes neon2 {
				  from {
				    text-shadow: 0 0 10px #fff,
				               0 0 20px  #fff,
				               0 0 30px  #fff,
				               0 0 40px  #228DFF,
				               0 0 70px  #228DFF,
				               0 0 80px  #228DFF,
				               0 0 100px #228DFF,
				               0 0 150px #228DFF;
				  }
				  to {
				    text-shadow: 0 0 5px #fff,
				               0 0 10px #fff,
				               0 0 15px #fff,
				               0 0 20px #228DFF,
				               0 0 35px #228DFF,
				               0 0 40px #228DFF,
				               0 0 50px #228DFF,
				               0 0 75px #228DFF;
				  }
				}

				@-moz-keyframes neon3 {
				  from {
				    text-shadow: 0 0 10px #fff,
				               0 0 20px  #fff,
				               0 0 30px  #fff,
				               0 0 40px  #FFDD1B,
				               0 0 70px  #FFDD1B,
				               0 0 80px  #FFDD1B,
				               0 0 100px #FFDD1B,
				               0 0 150px #FFDD1B;
				  }
				  to {
				    text-shadow: 0 0 5px #fff,
				               0 0 10px #fff,
				               0 0 15px #fff,
				               0 0 20px #FFDD1B,
				               0 0 35px #FFDD1B,
				               0 0 40px #FFDD1B,
				               0 0 50px #FFDD1B,
				               0 0 75px #FFDD1B;
				  }
				}

				@-moz-keyframes neon4 {
				  from {
				    text-shadow: 0 0 10px #fff,
				               0 0 20px  #fff,
				               0 0 30px  #fff,
				               0 0 40px  #B6FF00,
				               0 0 70px  #B6FF00,
				               0 0 80px  #B6FF00,
				               0 0 100px #B6FF00,
				               0 0 150px #B6FF00;
				  }
				  to {
				    text-shadow: 0 0 5px #fff,
				               0 0 10px #fff,
				               0 0 15px #fff,
				               0 0 20px #B6FF00,
				               0 0 35px #B6FF00,
				               0 0 40px #B6FF00,
				               0 0 50px #B6FF00,
				               0 0 75px #B6FF00;
				  }
				}

				@-moz-keyframes neon5 {
				  from {
				    text-shadow: 0 0 10px #fff,
				               0 0 20px  #fff,
				               0 0 30px  #fff,
				               0 0 40px  #FF9900,
				               0 0 70px  #FF9900,
				               0 0 80px  #FF9900,
				               0 0 100px #FF9900,
				               0 0 150px #FF9900;
				  }
				  to {
				    text-shadow: 0 0 5px #fff,
				               0 0 10px #fff,
				               0 0 15px #fff,
				               0 0 20px #FF9900,
				               0 0 35px #FF9900,
				               0 0 40px #FF9900,
				               0 0 50px #FF9900,
				               0 0 75px #FF9900;
				  }
				}

				@-moz-keyframes neon6 {
				  from {
				    text-shadow: 0 0 10px #fff,
				               0 0 20px #fff,
				               0 0 30px #fff,
				               0 0 40px #ff00de,
				               0 0 70px #ff00de,
				               0 0 80px #ff00de,
				               0 0 100px #ff00de,
				               0 0 150px #ff00de;
				  }
				  to {
				    text-shadow: 0 0 5px #fff,
				               0 0 10px #fff,
				               0 0 15px #fff,
				               0 0 20px #ff00de,
				               0 0 35px #ff00de,
				               0 0 40px #ff00de,
				               0 0 50px #ff00de,
				               0 0 75px #ff00de;
				  }
				}

				/*glow*/
				@keyframes neon1 {
				  from {
				    text-shadow: 0 0 10px #fff,
				               0 0 20px  #fff,
				               0 0 30px  #fff,
				               0 0 40px  #FF1177,
				               0 0 70px  #FF1177,
				               0 0 80px  #FF1177,
				               0 0 100px #FF1177,
				               0 0 150px #FF1177;
				  }
				  to {
				    text-shadow: 0 0 5px #fff,
				               0 0 10px #fff,
				               0 0 15px #fff,
				               0 0 20px #FF1177,
				               0 0 35px #FF1177,
				               0 0 40px #FF1177,
				               0 0 50px #FF1177,
				               0 0 75px #FF1177;
				  }
				}

				@keyframes neon2 {
				  from {
				    text-shadow: 0 0 10px #fff,
				               0 0 20px  #fff,
				               0 0 30px  #fff,
				               0 0 40px  #228DFF,
				               0 0 70px  #228DFF,
				               0 0 80px  #228DFF,
				               0 0 100px #228DFF,
				               0 0 150px #228DFF;
				  }
				  to {
				    text-shadow: 0 0 5px #fff,
				               0 0 10px #fff,
				               0 0 15px #fff,
				               0 0 20px #228DFF,
				               0 0 35px #228DFF,
				               0 0 40px #228DFF,
				               0 0 50px #228DFF,
				               0 0 75px #228DFF;
				  }
				}

				@keyframes neon3 {
				  from {
				    text-shadow: 0 0 10px #fff,
				               0 0 20px  #fff,
				               0 0 30px  #fff,
				               0 0 40px  #FFDD1B,
				               0 0 70px  #FFDD1B,
				               0 0 80px  #FFDD1B,
				               0 0 100px #FFDD1B,
				               0 0 150px #FFDD1B;
				  }
				  to {
				    text-shadow: 0 0 5px #fff,
				               0 0 10px #fff,
				               0 0 15px #fff,
				               0 0 20px #FFDD1B,
				               0 0 35px #FFDD1B,
				               0 0 40px #FFDD1B,
				               0 0 50px #FFDD1B,
				               0 0 75px #FFDD1B;
				  }
				}

				@keyframes neon4 {
				  from {
				    text-shadow: 0 0 10px #fff,
				               0 0 20px  #fff,
				               0 0 30px  #fff,
				               0 0 40px  #B6FF00,
				               0 0 70px  #B6FF00,
				               0 0 80px  #B6FF00,
				               0 0 100px #B6FF00,
				               0 0 150px #B6FF00;
				  }
				  to {
				    text-shadow: 0 0 5px #fff,
				               0 0 10px #fff,
				               0 0 15px #fff,
				               0 0 20px #B6FF00,
				               0 0 35px #B6FF00,
				               0 0 40px #B6FF00,
				               0 0 50px #B6FF00,
				               0 0 75px #B6FF00;
				  }
				}

				@keyframes neon5 {
				  from {
				    text-shadow: 0 0 10px #fff,
				               0 0 20px  #fff,
				               0 0 30px  #fff,
				               0 0 40px  #FF9900,
				               0 0 70px  #FF9900,
				               0 0 80px  #FF9900,
				               0 0 100px #FF9900,
				               0 0 150px #FF9900;
				  }
				  to {
				    text-shadow: 0 0 5px #fff,
				               0 0 10px #fff,
				               0 0 15px #fff,
				               0 0 20px #FF9900,
				               0 0 35px #FF9900,
				               0 0 40px #FF9900,
				               0 0 50px #FF9900,
				               0 0 75px #FF9900;
				  }
				}

				@keyframes neon6 {
				  from {
				    text-shadow: 0 0 10px #fff,
				               0 0 20px #fff,
				               0 0 30px #fff,
				               0 0 40px #ff00de,
				               0 0 70px #ff00de,
				               0 0 80px #ff00de,
				               0 0 100px #ff00de,
				               0 0 150px #ff00de;
				  }
				  to {
				    text-shadow: 0 0 5px #fff,
				               0 0 10px #fff,
				               0 0 15px #fff,
				               0 0 20px #ff00de,
				               0 0 35px #ff00de,
				               0 0 40px #ff00de,
				               0 0 50px #ff00de,
				               0 0 75px #ff00de;
				  }
				}


				/*REEEEEEEEEEESPONSIVE*/
				@media (max-width: 650px) {
				  
				  #container{
				    width: 100%;
				  }
				  
				  p{
				    font-size:3.5em;
				  }

				}
	</style>
</head>
<body>
	<p style="font-size:24px;margin-top:20px"><a href="#" class="active" style="font-size:24px">
	    送给最最最最最最最最最最最最最漂亮的最最最最最可爱的最最最最最最美丽的亲耐滴你
	  </a></p>
	<canvas id="pinkboard"></canvas>
	<script>
		
	var settings = {
	  particles: {
	    length:   500, // maximum amount of particles
	    duration:   2, // particle duration in sec
	    velocity: 100, // particle velocity in pixels/sec
	    effect: -0.75, // play with this for a nice effect
	    size:      30, // particle size in pixels
	  },
	};

	/*
	 * RequestAnimationFrame polyfill by Erik Möller
	 */
	(function(){var b=0;var c=["ms","moz","webkit","o"];for(var a=0;a<c.length&&!window.requestAnimationFrame;++a){window.requestAnimationFrame=window[c[a]+"RequestAnimationFrame"];window.cancelAnimationFrame=window[c[a]+"CancelAnimationFrame"]||window[c[a]+"CancelRequestAnimationFrame"]}if(!window.requestAnimationFrame){window.requestAnimationFrame=function(h,e){var d=new Date().getTime();var f=Math.max(0,16-(d-b));var g=window.setTimeout(function(){h(d+f)},f);b=d+f;return g}}if(!window.cancelAnimationFrame){window.cancelAnimationFrame=function(d){clearTimeout(d)}}}());

	/*
	 * Point class
	 */
	var Point = (function() {
	  function Point(x, y) {
	    this.x = (typeof x !== 'undefined') ? x : 0;
	    this.y = (typeof y !== 'undefined') ? y : 0;
	  }
	  Point.prototype.clone = function() {
	    return new Point(this.x, this.y);
	  };
	  Point.prototype.length = function(length) {
	    if (typeof length == 'undefined')
	      return Math.sqrt(this.x * this.x + this.y * this.y);
	    this.normalize();
	    this.x *= length;
	    this.y *= length;
	    return this;
	  };
	  Point.prototype.normalize = function() {
	    var length = this.length();
	    this.x /= length;
	    this.y /= length;
	    return this;
	  };
	  return Point;
	})();

	/*
	 * Particle class
	 */
	var Particle = (function() {
	  function Particle() {
	    this.position = new Point();
	    this.velocity = new Point();
	    this.acceleration = new Point();
	    this.age = 0;
	  }
	  Particle.prototype.initialize = function(x, y, dx, dy) {
	    this.position.x = x;
	    this.position.y = y;
	    this.velocity.x = dx;
	    this.velocity.y = dy;
	    this.acceleration.x = dx * settings.particles.effect;
	    this.acceleration.y = dy * settings.particles.effect;
	    this.age = 0;
	  };
	  Particle.prototype.update = function(deltaTime) {
	    this.position.x += this.velocity.x * deltaTime;
	    this.position.y += this.velocity.y * deltaTime;
	    this.velocity.x += this.acceleration.x * deltaTime;
	    this.velocity.y += this.acceleration.y * deltaTime;
	    this.age += deltaTime;
	  };
	  Particle.prototype.draw = function(context, image) {
	    function ease(t) {
	      return (--t) * t * t + 1;
	    }
	    var size = image.width * ease(this.age / settings.particles.duration);
	    context.globalAlpha = 1 - this.age / settings.particles.duration;
	    context.drawImage(image, this.position.x - size / 2, this.position.y - size / 2, size, size);
	  };
	  return Particle;
	})();

	/*
	 * ParticlePool class
	 */
	var ParticlePool = (function() {
	  var particles,
	      firstActive = 0,
	      firstFree   = 0,
	      duration    = settings.particles.duration;
	  
	  function ParticlePool(length) {
	    // create and populate particle pool
	    particles = new Array(length);
	    for (var i = 0; i < particles.length; i++)
	      particles[i] = new Particle();
	  }
	  ParticlePool.prototype.add = function(x, y, dx, dy) {
	    particles[firstFree].initialize(x, y, dx, dy);
	    
	    // handle circular queue
	    firstFree++;
	    if (firstFree   == particles.length) firstFree   = 0;
	    if (firstActive == firstFree       ) firstActive++;
	    if (firstActive == particles.length) firstActive = 0;
	  };
	  ParticlePool.prototype.update = function(deltaTime) {
	    var i;
	    
	    // update active particles
	    if (firstActive < firstFree) {
	      for (i = firstActive; i < firstFree; i++)
	        particles[i].update(deltaTime);
	    }
	    if (firstFree < firstActive) {
	      for (i = firstActive; i < particles.length; i++)
	        particles[i].update(deltaTime);
	      for (i = 0; i < firstFree; i++)
	        particles[i].update(deltaTime);
	    }
	    
	    // remove inactive particles
	    while (particles[firstActive].age >= duration && firstActive != firstFree) {
	      firstActive++;
	      if (firstActive == particles.length) firstActive = 0;
	    }
	    
	    
	  };
	  ParticlePool.prototype.draw = function(context, image) {
	    // draw active particles
	    if (firstActive < firstFree) {
	      for (i = firstActive; i < firstFree; i++)
	        particles[i].draw(context, image);
	    }
	    if (firstFree < firstActive) {
	      for (i = firstActive; i < particles.length; i++)
	        particles[i].draw(context, image);
	      for (i = 0; i < firstFree; i++)
	        particles[i].draw(context, image);
	    }
	  };
	  return ParticlePool;
	})();

	/*
	 * Putting it all together
	 */
	(function(canvas) {
	  var context = canvas.getContext('2d'),
	      particles = new ParticlePool(settings.particles.length),
	      particleRate = settings.particles.length / settings.particles.duration, // particles/sec
	      time;
	  
	  // get point on heart with -PI <= t <= PI
	  function pointOnHeart(t) {
	    return new Point(
	      160 * Math.pow(Math.sin(t), 3),
	      130 * Math.cos(t) - 50 * Math.cos(2 * t) - 20 * Math.cos(3 * t) - 10 * Math.cos(4 * t) + 25
	    );
	  }
	  
	  // creating the particle image using a dummy canvas
	  var image = (function() {
	    var canvas  = document.createElement('canvas'),
	        context = canvas.getContext('2d');
	    canvas.width  = settings.particles.size;
	    canvas.height = settings.particles.size;
	    // helper function to create the path
	    function to(t) {
	      var point = pointOnHeart(t);
	      point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350;
	      point.y = settings.particles.size / 2 - point.y * settings.particles.size / 350;
	      return point;
	    }
	    // create the path
	    context.beginPath();
	    var t = -Math.PI;
	    var point = to(t);
	    context.moveTo(point.x, point.y);
	    while (t < Math.PI) {
	      t += 0.01; // baby steps!
	      point = to(t);
	      context.lineTo(point.x, point.y);
	    }
	    context.closePath();
	    // create the fill
	    context.fillStyle = '#ea80b0';
	    context.fill();
	    // create the image
	    var image = new Image();
	    image.src = canvas.toDataURL();
	    return image;
	  })();
	  
	  // render that thing!
	  function render() {
	    // next animation frame
	    requestAnimationFrame(render);
	    
	    // update time
	    var newTime   = new Date().getTime() / 1000,
	        deltaTime = newTime - (time || newTime);
	    time = newTime;
	    
	    // clear canvas
	    context.clearRect(0, 0, canvas.width, canvas.height);
	    
	    // create new particles
	    var amount = particleRate * deltaTime;
	    for (var i = 0; i < amount; i++) {
	      var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());
	      var dir = pos.clone().length(settings.particles.velocity);
	      particles.add(canvas.width / 2 + pos.x, canvas.height / 2 - pos.y, dir.x, -dir.y);
	    }
	    
	    // update and draw particles
	    particles.update(deltaTime);
	    particles.draw(context, image);
	  }
	  
	  // handle (re-)sizing of the canvas
	  function onResize() {
	    canvas.width  = canvas.clientWidth;
	    canvas.height = canvas.clientHeight;
	  }
	  window.onresize = onResize;
	  
	  // delay rendering bootstrap
	  setTimeout(function() {
	    onResize();
	    render();
	  }, 10);
	})(document.getElementById('pinkboard'));
	</script>
</body>
</html>